<template>
	<!-- <el-button class="mb20" @click="submit" type="primary">确定修改</el-button> -->
	<!-- <div>
		<span>导航小图尺寸:300*200,高清大图:1280*720</span>
	</div> -->
	<div class="flex qz">

		<div v-for="(item,index) in list">
			<h1>{{item.title}}</h1>

			<div>
             <el-upload class="avatar-uploader" :action="`${api}/index.php/index/goods/uploadfile`"
					:show-file-list="false"
					  :on-error="errors"
					 :on-success=
					 "(file)=>{editImgs({img:file.data,id:item.id})} 
					 ">
					<img v-if="item.img" :src="ifImgHeader(item.img)" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>

		</div>


	</div>




</template>

<script>
	import {

		ElMessage
	} from 'element-plus'
	import config from "../config.js";

	import {
		mounted,
		ref,
		reactive,
		toRefs
	} from "vue";
	export default {




		data() {
			return {
				formLabelWidth: "120px",
				list:[],
				url: ""
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			errors(err){
				console.log(err)
			},
			removerow(key, index) {
				this[key].splice(index, 1);
			},
			editImgs(obj){
				console.log(obj)
				this.$http.post("/index.php/index/goods/goodsedit", obj).then(data=>{
					console.log(data);
					this.getData();
				})
			},
			add(key) {

				this[key].push({
					nav: "",
					info: "",
					type: ""
				})
				console.log(this.imageb)
			},
			uploadsuccess(file, key, index) {

				this[key][index].nav = file.data;
			},
			uploadimgorvideo(file, key, index, ref) {
				let type = config.matchFileSuffixType(file.name);
				type == 'image' ? this.url = `${config.api}/index.php/index/goods/aliuploadfile` :
					this.url = `${config.api}/index.php/index/goods/uploadvideo`;
				if (file.status == "ready") {
					console.log(this.$refs)
					this.$nextTick(() => {
						this.$refs[ref].submit();
					})
				}
				if (file.status == "success") {
					this[key][index] = {
						type: type,
						info: file.response.data,
						nav: this[key][index].nav
					};

				}
			},
			getData() {
				this.$http.get("/index.php/index/goods/goodsedit").then((data) => {
					this.list=data;
				})
			},
			submit() {
				this.$http.post("/index.php/index/goods/qsjyjcqzadd", {
					imagea: JSON.stringify(this.imagea),
					imageb: JSON.stringify(this.imageb),
					imagec: JSON.stringify(this.imagec),
					imagep: JSON.stringify(this.imagep),
				}).then((data) => {
					ElMessage({
						message: '操作成功',
						type: 'success',
					})
					this.getData();
				})
			},
			handleRemove(index) {
				this.picfileList.splice(index, 1);
			},


		},


	}
</script>

<style>
	.qz {
		flex-wrap: wrap;
	}

	.qz>div {
		margin: 20px;
		width: 20%;
		min-width: 450px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow:
			hidden;
	}

	.avatar-uploader .el-upload i {
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 148px;
		height: 148px;
		line-height: 148px;
		text-align: center;
	}

	.avatar {
		width: 148px;
		height: 148px;
		display: block;
	}
</style>
